<template>
	<view>
		<!-- 顶部导航 -->
		<view class="topTabBar" :style="{position:headerPosition,top:headerTop}">
			<view class="grid" v-for="(grid,tbIndex) in orderType" :key="tbIndex" @tap="showType(tbIndex,grid.type)">
				<view class="text" :class="[tbIndex==tabbarIndex?'on':'']">{{grid.name}}</view>
			</view>
		</view>
		<!-- 考虑非APP端长列表和复杂的DOM使用scroll-view会卡顿，所以漂浮顶部选项卡使用page本身的滑动 -->
		<view class="order-list">
			<view class="list">
				<view class="onorder" v-if="list.length==0">
					<image src="../../../static/img/noorder.png"></image>
					<view class="text">
						没有相关订单
					</view>
				</view>
				<!--  -->
				<view class="row" v-for="(row,index) in list" :key="index"
					@click="toPage('../orderDetail/index?id=' + row.id)">
					<view class="type">订单号：{{row.order_id}}</view>
					<view class="order-info" v-for="(item,index) in row.suborder" :key="item.id">
						<view class="left">
							<image :src="item.attribute_info.img_src |getImg"></image>
						</view>
						<view class="right">
							<view class="name">
								{{item.goods_info.name}}
							</view>
							<!-- <view class="des">
								{{item.goods_info.introduction}}
							</view> -->
							<view class="spec"><text>{{item.attribute_info.attribute_name}}</text></view>
							<view class="price-number">
								￥<view class="price">{{item.attribute_info.price}}</view>
								x<view class="number">{{item.num}}</view>
							</view>
						</view>

					</view>
					<view class="detail">
						<view class="number">共{{row.count}}件商品</view>
						<view class="sum">合计￥<view class="price">{{row.pay_amount}}</view>
						</view>
						<!-- <view class="nominal">(含运费 ￥{{row.freight}})</view> -->
					</view>
					<view class="btns">
						<block v-if="row.status==0">
							<view class="default" @tap.stop="cancelOrder(row)">取消订单</view>
							<view class="pay" @tap.stop="toPayment(row)">付款</view>
						</block>
						<!-- 	<block v-if="row.type=='back'">
							<view class="default" @tap="remindDeliver(row)">提醒发货</view>
						</block> -->
						<block v-if="row.status==2">
							<view class="default" v-if="row.express_type == 1" @tap.stop="showLogistics(row)">查看物流
							</view>
							<view class="pay" @tap.stop="sureOrder(row)">确认收货</view>
							<view class="pay"
								@tap.stop="toPage('returngoods/returngoods?id=' + row.id + '&num=' + row.pay_amount)">
								我要退货</view>
						</block>
						<!-- <block v-if="row.type=='received'">
							<view class="default">评价</view>
							<view class="default">再次购买</view>
						</block> -->
						<!-- <block v-if="row.type=='completed'">
							<view class="default">再次购买</view>
						</block> -->
						<!-- 	<block v-if="row.type=='refunds'">
							<view class="default">查看进度</view>
						</block> -->
						<block v-if="row.status==1">
							<view class="default">待发货</view>
							<view class="pay" @tap.stop="OrderPick(row)">我要自提</view>
							<view class="pay"
								@tap.stop="toPage('returngoods/returngoods?id=' + row.id + '&num=' + row.pay_amount)">
								我要退货</view>
						</block>
						<block v-if="row.status==-1">
							<view class="default">已取消</view>
						</block>
						<block v-if="row.status==-2">
							<view class="default">已退货</view>
						</block>
						<block v-if="row.status==4">
							<view class="default">退货中</view>
						</block>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	import {
		OrderList,
		CancelOrder,
		SureOrder,
		OrderPick
	} from "@/api/api.js"
	export default {
		data() {
			return {
				headerPosition: "fixed",
				headerTop: "0px",
				typeText: {
					unpaid: '等待付款',
					back: '等待商家发货',
					unreceived: '商家已发货',
					received: '等待用户评价',
					completed: '交易已完成',
					refunds: '商品退货处理中',
					cancelled: '订单已取消'
				},
				orderType: [{
						name: '全部',
						type: 'all'
					},
					{
						name: '待付款',
						type: 0
					},
					{
						name: '待发货',
						type: 1
					}, {
						name: '待收货',
						type: 2
					}, {
						name: '已完成',
						type: 3
					},
					{
						name: '退换货',
						type: 4
					},

				],
				//订单列表 演示数据
				orderList: [],
				list: [],
				tabbarIndex: 0,
				order_status: ['all', 0, 1, 2, 3, 4]
			};
		},
		onLoad(option) {
			//option为object类型，会序列化上个页面传递的参数
			console.log("option: " + JSON.stringify(option));
			// this.list = this.orderList[tbIndex];
			this.tabbarIndex = option.tbIndex;
			this.OrderList()
			//兼容H5下排序栏位置
			// #ifdef H5
			let Timer = setInterval(() => {
				let uniHead = document.getElementsByTagName('uni-page-head');
				if (uniHead.length > 0) {
					this.headerTop = uniHead[0].offsetHeight + 'px';
					clearInterval(Timer); //清除定时器
				}
			}, 1);
			// #endif
		},
		onShow() {
			this.OrderList()
		},
		methods: {
			returngoods(row) {

			},
			toPage(url) {
				uni.navigateTo({
					url
				})
			},
			//自提
			OrderPick(row) {
				uni.showModal({
					title: '提示',
					content: '确定已在线下实体店提到货了吗？',
					success: (data) => {
						if (data.confirm) {
							OrderPick({
								order_id: row.id
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
								if (res.status == 1) {
									setTimeout(() => {
										this.list = []
										this.OrderList()
									}, 1000)
								}
							})
						}
					}
				})
			},
			sureOrder(row) {
				uni.showModal({
					title: '确认收货',
					content: '是否确认收货？',
					success: (data) => {
						if (data.confirm) {
							SureOrder({
								order_id: row.id
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
								if (res.status == 1) {
									setTimeout(() => {
										this.list = []
										this.OrderList()
									}, 1000)
								}
							})
						}
					}
				});

			},
			OrderList() {
				var that = this
				OrderList({
					type: that.order_status[that.tabbarIndex]
				}).then(res => {
					that.list = res.data.order
					that.list.forEach(info => {
						info.suborder.forEach(item => {
							item.attribute_info = JSON.parse(item.attribute_info)
							item.goods_info = JSON.parse(item.goods_info)
						})
						info.count = info.suborder.length
					})

					console.log(that.list);
				})
			},
			showType(tbIndex, order_status) {
				this.tabbarIndex = tbIndex;
				this.OrderList()
			},
			showLogistics(row) {
				// #ifdef H5
				window.location.href = "http://m.kuaidi100.com/result.jsp?nu=" + row.express_num
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/user/order_list/logistics/index?express_num=' + row.express_num
				})
				// #endif
			},
			remindDeliver(row) {
				uni.showToast({
					title: '已提醒商家发货'
				})
			},
			cancelOrder(row) {
				uni.showModal({
					title: '取消订单',
					content: '确定取消此订单？',
					success: (data) => {
						if (data.confirm) {
							CancelOrder({
								order_id: row.id
							}).then(res => {
								uni.showToast({
									title: res.message,
									icon: "none"
								})
								if (res.status == 1) {
									setTimeout(() => {
										this.list = []
										this.OrderList()
									}, 1000)
								}
							})
						}
					}
				});
			},
			doCancelOrder(ordersn) {
				let typeNum = this.orderList.length;
				for (let i = 0; i < typeNum; i++) {
					let list = this.orderList[i];
					let orderNum = list.length;
					if (orderNum > 0 && list[0].type == 'unpaid') {
						for (let j = 0; j < orderNum; j++) {
							if (this.orderList[i][j].ordersn == ordersn) {
								this.orderList[i][j].type = 'cancelled';
								break;
							}
						}
					}

				}
			},
			toPayment(row) {
				//本地模拟订单提交UI效果
				uni.showLoading({
					title: '正在获取订单...'
				})
				let paymentOrder = [];
				paymentOrder.push(row);
				setTimeout(() => {
					uni.setStorage({
						key: 'paymentOrder',
						data: paymentOrder,
						success: () => {
							uni.hideLoading();
							uni.navigateTo({
								url: "/pages/pay/payment/payment?amount=" + row.pay_amount +
									"&order_id=" + row.order_id
							})
						}
					})
				}, 500)
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #0F172A;
	}

	.topTabBar {
		width: 100%;
		position: fixed;
		top: 0;
		z-index: 10;
		background-color: #1E293B;
		height: 80upx;
		display: flex;
		justify-content: space-around;

		.grid {
			width: 20%;
			height: 80upx;
			display: flex;
			justify-content: center;
			align-items: center;
			color: #64748B;
			font-size: 28upx;

			.text {
				height: 76upx;
				display: flex;
				align-items: center;

				&.on {
					font-weight: bold;
					color: #798AD6;
					border-bottom: solid 4upx #798AD6;
				}
			}

		}
	}

	.order-list {
		margin-top: 80upx;
		padding-top: 20upx;
		width: 100%;

		.list {
			width: 94%;
			margin: 0 auto;

			.onorder {
				width: 100%;
				height: 50vw;
				display: flex;
				justify-content: center;
				align-content: center;
				flex-wrap: wrap;

				image {
					width: 20vw;
					height: 20vw;
					border-radius: 100%;
				}

				.text {
					width: 100%;
					height: 60upx;
					font-size: 28upx;
					color: #f2f2f2;
					display: flex;
					justify-content: center;
					align-items: center;
				}
			}

			.row {
				width: calc(100% - 40upx);
				padding: 10upx 20upx;
				border-radius: 10upx;
				background-color: #fff;
				margin-bottom: 20upx;
				background: #1E293B;

				.type {
					font-size: 26upx;
					color: #fff;
					height: 50upx;
					display: flex;
					align-items: center;
				}

				.order-info {
					width: 100%;
					display: flex;
					margin-top: 5px;

					.left {
						flex-shrink: 0;
						width: 25vw;
						height: 25vw;

						image {
							width: 25vw;
							height: 25vw;
							border-radius: 10upx;
						}
					}

					.right {
						width: 100%;
						margin-left: 10upx;
						position: relative;
						color: #fff;

						.name {
							width: 100%;
							font-size: 28upx;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}

						.des {
							width: 100%;
							font-size: 12px;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 1;
							overflow: hidden;
							margin-top: 5px;
						}

						.spec {
							color: #fff;
							font-size: 22upx;
							margin-top: 5px;

							text {
								background: #8980FD;
								padding: 1px 10px;
								box-sizing: border-box;
								border-radius: 10px;
							}
						}

						.price-number {
							position: absolute;
							bottom: 0;
							width: 100%;
							display: flex;
							justify-content: flex-end;
							font-size: 22upx;
							color: #fff;
							display: flex;
							align-items: flex-end;

							.price {
								font-size: 24upx;
								margin-right: 5upx;
							}

						}
					}
				}

				.detail {
					display: flex;
					justify-content: flex-end;
					align-items: flex-end;
					height: 60upx;
					font-size: 26upx;
					color: #fff;

					.sum {
						padding: 0 8upx;
						display: flex;
						align-items: flex-end;

						.price {
							font-size: 30upx;
						}
					}

				}

				.btns {
					height: 80upx;
					display: flex;
					align-items: center;
					justify-content: flex-end;

					view {
						min-width: 130upx;
						height: 55upx;
						padding: 0 20upx;
						border-radius: 50upx;
						display: flex;
						justify-content: center;
						align-items: center;
						font-size: 28upx;
						margin-left: 20upx;
					}

					.default {
						border: solid 1upx #ccc;
						color: #666;
						border: solid 1upx #798AD6;
						color: #798AD6;
						background: transparent;
					}

					.pay {
						border: solid 1upx #798AD6;
						color: #fff;
						background: #798AD6;
					}
				}
			}
		}
	}
</style>